<template>
  <div class="bar-chart-wrapper">
    <!-- <button type="button" @click="refreshData">刷新</button> -->
    <BaseEcharts :chartData="realTimeData" ref="bar" height="100%" />
  </div>
</template>

<script>
import BaseEcharts from './echart.vue'
export default {
  name: 'BarChart',
  components: {
    BaseEcharts
  },
  data() {
    return {
      barData: [
        { label: '升腾资讯', value: 3200, total: 4486870, per: 0 },
        { label: '壹盛昕', value: 1000, total: 476261, per: 0 },
        { label: '仁创电子', value: 1000, total: 144440, per: 0 },
        { label: '联达科技', value: 81, total: 8373, per: 0 },
        { label: '深联电路', value: 7440, total: 568559, per: 0 },
        { label: '新安宏远', value: 14366, total: 747818, per: 0 },
        { label: '力优包装', value: 9600, total: 236620, per: 0 },
        { label: '斯普兰蒂', value: 5394, total: 121976, per: 0 },
        { label: '福友鑫', value: 1603, total: 17400, per: 0 }
      ],
      realTimeData: [],
      intervalIns: null
    }
  },
  mounted() {
    this.refreshData()
  },
  methods: {
    refreshData() {
      this.realTimeData = []
      setTimeout(() => {
        this.realTimeData = this.barData.map(item => {
          const num = this.toFixed(item.value / item.total, 4)
          const perNum = this.toFixed(num * 100, 2)
          return {
            ...item,
            num,
            perNum,
            per: perNum + '%'
          }
        })
      }, 50)
    },
    toFixed(n, fixedNum = 2) {
      return ~~(Math.pow(10, fixedNum) * n) / Math.pow(10, fixedNum)
    }
  }
}
</script>

<style scoped>
.bar-chart-wrapper {
  height: 100%;
}
</style>
